<script setup>
import { ref, onMounted } from 'vue'
import { bookApi } from './api'

const books = ref([])
const createDialogVisible = ref(false)
const updateDialogVisible = ref(false)
const createForm = ref({ name: '', author: '', description: '', cover: '' })
const updateForm = ref({ id: null, name: '', author: '', description: '', cover: '' })
const findForm = ref({ id: '' })

const fetchBooks = async () => {
  try {
    const response = await bookApi.getList()
    books.value = response.data
  } catch (error) {
    console.error('获取图书失败:', error)
  }
}

onMounted(() => {
  fetchBooks()
})

const showCreateDialog = () => {
  createForm.value = { name: '', author: '', description: '', cover: '' }
  createDialogVisible.value = true
}

const createBook = async () => {
  try {
    await bookApi.create(createForm.value)
    createDialogVisible.value = false
    fetchBooks()
  } catch (error) {
    console.error('创建图书失败:', error)
  }
}

const showUpdateDialog = (book) => {
  updateForm.value = { ...book }
  updateDialogVisible.value = true
}

const updateBook = async () => {
  try {
    await bookApi.update(updateForm.value)
    updateDialogVisible.value = false
    fetchBooks()
  } catch (error) {
    console.error('更新图书失败:', error)
  }
}

const findBook = async () => {
  try {
    const response = await bookApi.find(findForm.value.id)
    books.value = [response.data]
  } catch (error) {
    console.error('查找图书失败:', error)
  }
}

const deleteBook = async (id) => {
  try {
    await bookApi.delete(id)
    fetchBooks()
  } catch (error) {
    console.error('删除图书失败:', error)
  }
}

const handleUploadSuccess = (response) => {
  createForm.value.cover = response.url
}

const handleUpdateUploadSuccess = (response) => {
  updateForm.value.cover = response.url
}

const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    console.error('只能上传图片文件!')
    return false
  }
  return true
}
</script>

<template>
  <div>
    <h1>图书列表</h1>
    <div style="margin-bottom: 20px;">
      <el-input v-model="findForm.id" clearable placeholder="输入图书ID" style="width: 200px; margin-right: 10px;" />
      <el-button @click="findBook">查找图书</el-button>
      <el-button @click="showCreateDialog">创建图书</el-button>
    </div>
    <el-table :data="books" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="书名" width="180" />
      <el-table-column prop="author" label="作者" />
      <el-table-column label="封面" width="180">
        <template #default="scope">
          <img :src="scope.row.cover" style="width: 100px; height: 100px; object-fit: cover;" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="showUpdateDialog(scope.row)">更新</el-button>
          <el-button @click="deleteBook(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建图书对话框 -->
    <el-dialog v-model="createDialogVisible" title="创建图书">
      <el-form :model="createForm">
        <el-form-item label="书名">
          <el-input v-model="createForm.name" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="createForm.author" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="createForm.description" />
        </el-form-item>
        <el-form-item label="封面">
          <el-upload action="http://localhost:3000/book/upload" :on-success="handleUploadSuccess"
            :before-upload="beforeUpload">
            <el-button type="primary">上传封面</el-button>
          </el-upload>
          <img v-if="createForm.cover" :src="createForm.cover"
            style="width: 100px; height: 100px; object-fit: cover; margin-top: 10px;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button @click="createBook">确定</el-button>
      </template>
    </el-dialog>

    <!-- 更新图书对话框 -->
    <el-dialog v-model="updateDialogVisible" title="更新图书">
      <el-form :model="updateForm">
        <el-form-item label="书名">
          <el-input v-model="updateForm.name" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="updateForm.author" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="updateForm.description" />
        </el-form-item>
        <el-form-item label="封面">
          <el-upload action="http://localhost:3000/book/upload" :on-success="handleUpdateUploadSuccess"
            :before-upload="beforeUpload">
            <el-button type="primary">上传新封面</el-button>
          </el-upload>
          <img v-if="updateForm.cover" :src="updateForm.cover"
            style="width: 100px; height: 100px; object-fit: cover; margin-top: 10px;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button @click="updateBook">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}

h1 {
  margin-bottom: 20px;
}
</style>
